<template>
    <li :style="{background:icon}" @click="isShow = !isShow">
        <i :class="iconclass"></i>
        <span v-show="isShow">{{tro}}</span>
    </li>
</template>
<script>
    import '../font/iconfont.css';
    export default {
        name: 'iconList',
        props: ['id', 'tro', "icon", 'iconclass'],
        data() {
            return {
                isShow: false
            }
        }
    }
</script>
<style scoped>
    li {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
        margin: 10px 20%;
        position: relative;
    }
    
    i {
        font-size: 30px;
    }
    
    span {
        width: 300px;
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: 50px;
        left: 10px;
    }
</style>